<template>
  <el-form ref="pwdFormRef" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="form.oldPassword" placeholder="请输入旧密码" type="password" minlength="5" maxlength="20"/>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password" minlength="5" maxlength="20"/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password" minlength="5" maxlength="20"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { reactive, toRefs, ref } from 'vue'
import memberApi from '../../../api/member'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'resetPwd',
  setup () {
    const pwdFormRef = ref(null)
    const router = useRouter()
    const state = reactive({
      form: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
        ]
      }
    })

    // 提交
    const submit = () => {
      pwdFormRef.value.validate(valid => {
        if (valid) {
          if (state.form.newPassword !== state.form.confirmPassword) {
            ElMessage.error('两次密码不一致')
          } else {
            memberApi.updateMemberPassword(state.form).then(res => {
              ElMessage.success('修改成功')
            })
          }
        }
      })
    }
    // 关闭
    // 关闭
    const close = () => {
      router.push('/home')
    }
    return {
      pwdFormRef,
      ...toRefs(state),
      submit,
      close

    }
  }
}
</script>

<style scoped>

</style>
